describe('TodoList - 修改和全部删除功能 E2E 测试', () => {
  beforeEach(() => {
    cy.visit('/')
    
    // 为每个测试预先添加一些任务
    cy.addTodo('学习Vue')
    cy.addTodo('学习Cypress')
    cy.addTodo('完成项目')
  })

  describe('修改TODO功能', () => {
    it('应该能够通过双击开始编辑TODO项目', () => {
      // 等待第一个任务出现并双击开始编辑
      cy.get('[data-cy="todo-text-0"]').should('be.visible').dblclick()

      // 验证编辑模式已激活
      cy.get('[data-cy="todo-edit-input-0"]').should('be.visible')
      cy.get('[data-cy="todo-text-0"]').should('not.exist')
      
      // 验证编辑输入框的值
      cy.get('[data-cy="todo-edit-input-0"]').should('have.value', '学习Vue')
    })

    it('应该能够通过回车键完成编辑', () => {
      const newText = '学习Vue 3.0'
      
      // 开始编辑并修改内容
      cy.editTodo(0, newText)
      
      // 验证编辑已完成
      cy.shouldHaveTodo(0, newText)
      cy.get('[data-cy="todo-edit-input-0"]').should('not.exist')
    })

    it('应该能够通过失去焦点完成编辑', () => {
      const newText = '学习Cypress测试框架'
      
      // 开始编辑第二个任务
      cy.get('[data-cy="todo-text-1"]').dblclick()
      
      // 修改内容并失去焦点
      cy.get('[data-cy="todo-edit-input-1"]')
        .clear()
        .type(newText)
        .blur()
      
      // 验证编辑已完成
      cy.shouldHaveTodo(1, newText)
      cy.get('[data-cy="todo-edit-input-1"]').should('not.exist')
    })

    it('应该能够修改多个TODO项目', () => {
      // 修改第一个任务
      cy.editTodo(0, '学习Vue 3.0 (已修改)')
      cy.shouldHaveTodo(0, '学习Vue 3.0 (已修改)')
      
      // 修改第三个任务
      cy.editTodo(2, '完成项目 (已修改)')
      cy.shouldHaveTodo(2, '完成项目 (已修改)')
      
      // 验证第二个任务未被修改
      cy.shouldHaveTodo(1, '学习Cypress')
    })

    it('编辑时输入框应该获得焦点', () => {
      cy.get('[data-cy="todo-text-0"]').dblclick()
      cy.get('[data-cy="todo-edit-input-0"]').should('be.focused')
    })
  })

  describe('TODO状态切换功能', () => {
    it('应该能够切换TODO项目的完成状态', () => {
      // 标记第一个任务为完成
      cy.toggleTodo(0)
      
      // 验证任务已标记为完成
      cy.get('[data-cy="todo-checkbox-0"]').should('be.checked')
      cy.get('[data-cy="todo-item-0"]').should('have.class', 'completed')
      
      // 取消完成状态
      cy.toggleTodo(0)
      
      // 验证任务已取消完成状态
      cy.get('[data-cy="todo-checkbox-0"]').should('not.be.checked')
      cy.get('[data-cy="todo-item-0"]').should('not.have.class', 'completed')
    })

    it('完成状态变化应该正确更新计数', () => {
      // 验证初始计数
      cy.get('[data-cy="todo-count"]')
        .should('contain', '已完成: 0')
        .and('contain', '未完成: 3')
      
      // 标记第一个任务为完成
      cy.toggleTodo(0)
      cy.get('[data-cy="todo-count"]')
        .should('contain', '已完成: 1')
        .and('contain', '未完成: 2')
      
      // 标记第二个任务为完成
      cy.toggleTodo(1)
      cy.get('[data-cy="todo-count"]')
        .should('contain', '已完成: 2')
        .and('contain', '未完成: 1')
    })

    it('应该能够修改已完成的TODO项目', () => {
      // 先标记第一个任务为已完成
      cy.toggleTodo(0)
      cy.get('[data-cy="todo-item-0"]').should('have.class', 'completed')
      
      // 编辑已完成的任务
      cy.editTodo(0, '学习Vue 3.0 (已修改)')
      
      // 验证修改成功且仍然保持完成状态
      cy.shouldHaveTodo(0, '学习Vue 3.0 (已修改)')
      cy.get('[data-cy="todo-checkbox-0"]').should('be.checked')
      cy.get('[data-cy="todo-item-0"]').should('have.class', 'completed')
    })

    it('应该能够同时有已完成和未完成的任务', () => {
      // 标记第一个和第三个任务为完成
      cy.toggleTodo(0)
      cy.toggleTodo(2)
      
      // 验证状态
      cy.get('[data-cy="todo-checkbox-0"]').should('be.checked')
      cy.get('[data-cy="todo-checkbox-1"]').should('not.be.checked')
      cy.get('[data-cy="todo-checkbox-2"]').should('be.checked')
      
      // 验证计数
      cy.get('[data-cy="todo-count"]')
        .should('contain', '已完成: 2')
        .and('contain', '未完成: 1')
    })
  })

  describe('全部删除功能', () => {
    it('应该显示删除全部按钮', () => {
      cy.get('[data-cy="clear-all-button"]')
        .should('be.visible')
        .and('contain', '删除全部')
    })

    it('应该能够删除所有TODO项目', () => {
      // 验证初始状态有3个任务
      cy.get('[data-cy="todo-list"]').children().should('have.length', 3)
      
      // 点击删除全部按钮
      cy.get('[data-cy="clear-all-button"]').click()
      
      // 验证所有任务都已删除
      cy.get('[data-cy="todo-list"]').children().should('have.length', 0)
    })

    it('删除全部后操作区域应该隐藏', () => {
      // 验证操作区域存在
      cy.get('.actions').should('be.visible')
      
      // 删除全部任务
      cy.get('[data-cy="clear-all-button"]').click()
      
      // 验证操作区域隐藏
      cy.get('.actions').should('not.exist')
    })

    it('删除全部后应该能够重新添加任务', () => {
      // 删除全部任务
      cy.get('[data-cy="clear-all-button"]').click()
      
      // 验证列表为空
      cy.get('[data-cy="todo-list"]').children().should('have.length', 0)
      
      // 添加新任务
      cy.addTodo('重新开始的任务')
      
      // 验证新任务已添加
      cy.shouldHaveTodo(0, '重新开始的任务')
      cy.get('[data-cy="todo-count"]').should('contain', '总计: 1')
      
      // 验证操作区域重新显示
      cy.get('.actions').should('be.visible')
    })

    it('删除全部应该包含已完成和未完成的任务', () => {
      // 标记一些任务为完成
      cy.toggleTodo(0)
      cy.toggleTodo(2)
      
      // 验证有已完成和未完成的任务
      cy.get('[data-cy="todo-count"]')
        .should('contain', '已完成: 2')
        .and('contain', '未完成: 1')
      
      // 删除全部
      cy.get('[data-cy="clear-all-button"]').click()
      
      // 验证所有任务都已删除
      cy.get('[data-cy="todo-list"]').children().should('have.length', 0)
    })
  })

  describe('综合功能测试', () => {
    it('应该能够完成完整的TODO管理流程', () => {
      // 1. 添加新任务
      cy.addTodo('新增的任务')
      cy.get('[data-cy="todo-list"]').children().should('have.length', 4)
      
      // 2. 修改任务
      cy.editTodo(0, '学习Vue 3.0 (已修改)')
      cy.shouldHaveTodo(0, '学习Vue 3.0 (已修改)')
      
      // 3. 标记任务为完成
      cy.toggleTodo(1)
      cy.toggleTodo(3)
      cy.get('[data-cy="todo-count"]')
        .should('contain', '已完成: 2')
        .and('contain', '未完成: 2')
      
      // 4. 删除单个任务
      cy.deleteTodo(2)
      cy.get('[data-cy="todo-list"]').children().should('have.length', 3)
      
      // 5. 最后删除全部
      cy.get('[data-cy="clear-all-button"]').click()
      cy.get('[data-cy="todo-list"]').children().should('have.length', 0)
    })

    it('页面应该保持响应式和用户友好', () => {
      // 验证页面布局
      cy.get('.todo-container').should('be.visible')
      cy.get('.input-wrapper').should('be.visible')
      
      // 验证按钮可点击性
      cy.get('[data-cy="add-button"]').should('not.be.disabled')
      cy.get('[data-cy="clear-all-button"]').should('not.be.disabled')
      
      // 验证输入框可用性
      cy.get('[data-cy="todo-input"]').should('not.be.disabled')
    })
  })
})
